<template>
    <div class="no-data" :style="{'background-color': bgColor}">
        <div>
            <image class="icon" :src="icon" alt=""></image>
            <text class="text">{{text}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        options: {
            styleIsolation: 'shared',
            virtualHost: true
        },
        props: {
            icon: {
                default: '../static/no-data.png',
                type: String
            },
            text: {
                default: '暂无数据',
                type: String
            },
            bgColor: {
                type: String,
                default: '#fff'
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .no-data{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        &>div{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .text{
            margin-top: torem(20);
            font-size: torem(28);
            color: #999;
        }
        image{
            width: torem(280);
            height: torem(143);
        }
    }
 
</style>
